/**
 * Created by bian.
 */
import React, { Component, PropTypes } from 'react';
import { StyleSheet, View, ScrollView, BackHandler, TouchableWithoutFeedback } from 'react-native';
import { MtContainer, MtChar, MtRadioButton, MtModal, MtNavBar, MtScreen } from 'martian-ui';
const WINDOW_WIDTH = MtScreen.width;
const WINDOW_HEIGHT = MtScreen.height;
const NavBarHeight = MtNavBar.height;
const MARGIN_TOP_HEIGHT = NavBarHeight + 50 + 0.5;

class DropDownModal extends Component {
    static defaultProps = {
        options: [],
        marginTopHeight: MARGIN_TOP_HEIGHT,
    };
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        };
        this.open = this.open.bind(this);
        this.close = this.close.bind(this);
        this.handleBackPress = this._handleBackPress.bind(this);
    }

    _handleBackPress() {
        this.close();
        return true;
    }

    open() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
        this.setState({
            visible: true,
        });
    }

    close() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
        this.setState({
            visible: false,
        });
        this.props.onClosed && this.props.onClosed();
    }

    render() {
        const { options, marginTopHeight, selectedOption, onSelect, transformOption, testOptionEqual, marginLeft } = this.props;
        const { visible } = this.state;
        const HEIGHT = WINDOW_HEIGHT - marginTopHeight - 200;
        let NEW_HEIGHT = HEIGHT * 0.5;
        const length = options && options.length || 0;

        if (length < 8) {
            NEW_HEIGHT = length * 50;
        }
        else if (length > 8) {
            NEW_HEIGHT = 8 * 50;
        }
        return (
            <MtModal
                style={{ top: marginTopHeight || 0, left: marginLeft || 0  }}
                animationType="fade"
                transparent={true}
                visible={visible}
            >
                <View
                    style={{
                        flex: 1,
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                    }}
                >
                    <View
                        style={{
                            backgroundColor: 'white',
                            // flex: 1,
                            width: WINDOW_WIDTH/ 3,
                            // height: options && (options.length * 50) <= (HEIGHT * 0.5) ? options.length * 50 : HEIGHT * 0.5,
                            height: NEW_HEIGHT,
                        }}
                    >
                        <ScrollView style={{ flex: 1 }}>
                            <MtRadioButton
                                options={options}
                                selectedOption={selectedOption}
                                onSelect={onSelect}
                                transformOption={transformOption}
                                testOptionEqual={testOptionEqual}
                            />
                        </ScrollView>
                    </View>
                    <TouchableWithoutFeedback onPress={this.close}>
                        <View style={{ width: WINDOW_WIDTH, flex: 1 }} />
                    </TouchableWithoutFeedback>
                </View>
            </MtModal>
        );
    }
}


const styles = StyleSheet.create({

});

module.exports = DropDownModal;
